<template>
    <div id="login">
        <div id="login-container">
            <el-divider>注册</el-divider>

            <el-form :model="registerForm" status-icon :rules="validRules" ref="registerForm">
                <el-form-item prop="username">
                    <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                    <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  prop="password2">
                    <el-input type="password" v-model="registerForm.password2" placeholder="请再次输入密码" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button id="login-btn" type="primary" @click="formCheck()">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import {register} from "@/api/account.js"
export default {
    name: 'Login',
    data() {
        const validateNotNull = (label) => {
            return (rule, value, callback) => {
                if(value == "") {
                    return callback(new Error(`${label}不能为空`));
                } else {
                    callback();
                }
            }
        }
        const validatePassword = (rule, value, callback) => {
            const regNumber = /\d+/;
            const regString = /[a-zA-Z]+/;
            if(value.length < 8 || !regNumber.test(value) || !regString.test(value)) {
                return callback(new Error(`密码必须包含字母数字，且长度不能少于8位`));
            } else {
                callback();
            }
        }
        const validatePassword2 = (rule, value, callback) => {
            if(value !== this.registerForm.password) {
                return callback(new Error("密码不一致"));
            } else {
                callback();
            }
        }
        return {
            registerForm: {
                username: "",
                password: "",
                password2: "",
            },
            validRules: {
                username: [
                    {validator: validateNotNull("用户名"), trigger: 'blur'}
                ],
                password: [
                    {validator: validateNotNull("密码"), trigger: 'blur'},
                    {validator: validatePassword, trigger: 'blur'}
                ],
                password2: [
                    {validator: validateNotNull("密码"), trigger: 'blur'},
                    {validator: validatePassword2, trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        register() {
            register({name: this.registerForm.username, pwd: this.registerForm.password}).then(res => {
                let status = res.data.status;
                if(status == 1){
                    this.$message({
                        message: '注册成功',
                        type: 'success'
                    });
                    this.$router.replace('/login');  //跳转至系统首页
                } else {
                    this.$message({
                        message: '注册失败',
                        type: 'error'
                    });
                }
            });
        },
        formCheck() {
            this.$refs.registerForm.validate((valid) => {
                if (valid) {
                    this.register();
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    @import "../assets/css/main.scss";

    #login{
        background-color:  $color_bg;
        width: 100%;
        height: 100%;
        @include flex-center();
    }
    #login-container {
        width: 292px;
        position: relative;
        top: -50px;
        .el-divider__text {
            background-color: $color_bg;
            color: $color_font;
            font-size: 20px;
        }

        #login-btn {
            width: 100%;
            background-color: $color_primary;

            &:hover {
                background-color: lighten($color_primary, 10%);
            }
        }

        #other-links {
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;
            .link {
                color: $color_font;
                font-size: 14px;
                
                &:hover {
                    color: $color_primary;
                }
            }
        }
    }
</style>